<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar class="bar" title="个人中心" />
    <Scroll class="content">
        <!-- 主体内容区 -->
        <div >
          <!-- 用户信息组件 -->
          <User :list="state.list" />
          <!-- 用户订单组件 -->
          <Myorder :order="state.order" :allorder="state.allorder" />

          <!-- 推荐 -->
          <!-- 猜你喜欢 -->
          <div class="recommend">
            <img
              src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png"
            />
          </div>
          <!-- 猜你喜欢的数据 -->
          <RecommendedTab />
        </div>
    </Scroll>
  </div>
</template>

<script setup>
import User from "@/views/Profile/Children/User.vue";
import Myorder from "@/views/Profile/Children/MyOrder.vue";
import Scroll from "@/components/common/Scroll.vue";
import RecommendedTab from "@/components/content/RecommendedTab.vue";
// 以上导入组件
import { reactive } from "@vue/reactivity";
const state = reactive({
  // 用户下面的收藏信息等
  list: [
    { num: 4, name: "收藏夹" },
    { num: 5, name: "关注店铺" },
    { num: 8, name: "足迹" },
    { num: 94, name: "红包卡卷" },
  ],
  // 订单工具
  order: [
    { name: "待付款", img: require("@/assets/img/fk.png") },
    { name: "待付款", img: require("@/assets/img/dfk.png") },
    { name: "待付款", img: require("@/assets/img/yfh.png") },
    { name: "待付款", img: require("@/assets/img/pj.png") },
    { name: "待付款", img: require("@/assets/img/tk.png") },
  ],
  // 更多工具
  allorder: [
    {
      name: "每日返现",
      img: "https://gw.alicdn.com/tfs/TB1Jcbkj4D1gK0jSZFsXXbldVXa-96-96.png_70x70q90_.webp",
    },
    {
      name: "领卷中心",
      img: "https://gw.alicdn.com/tfs/TB1zT0hkkT2gK0jSZPcXXcKkpXa-96-96.png_70x70q90_.webp",
    },
    {
      name: "闲置换钱",
      img: "https://gw.alicdn.com/tfs/TB14QMupYj1gK0jSZFuXXcrHpXa-96-96.png_70x70q90_.webp",
    },
    {
      name: "客服小蜜",
      img: "https://gw.alicdn.com/tfs/TB1csUri13tHKVjSZSgXXX4QFXa-96-96.png_70x70q90_.webp",
    },
    {
      name: "我的花呗",
      img: "https://gw.alicdn.com/tps/TB1rhCFPXXXXXa1XVXXXXXXXXXX-96-96.png_70x70q90_.webp",
    },
    {
      name: "我的快递",
      img: "https://gw.alicdn.com/tfs/TB1S6oYmQL0gK0jSZFxXXXWHVXa-96-96.png_70x70q90_.webp",
    },
    {
      name: "我的评价",
      img: "https://gw.alicdn.com/tps/TB1RN1QPXXXXXaqXFXXXXXXXXXX-96-96.png_70x70q90_.webp",
    },
    {
      name: "主体换肤",
      img: "https://gw.alicdn.com/tfs/TB1q0T8mpOWBuNjy0FiXXXFxVXa-96-96.png_70x70q90_.webp",
    },
  ],
});
</script>
<style lang="scss" scoped>
.content {
  position: absolute;
  top: 46px;
  bottom: 49px;
  background-color: #f2f2f2;
  left: 0;
  right: 0;
}
// 猜你喜欢
.recommend {
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: 20px 0;
  height: 60px;
  img {
    width: 161px;
    height: 19px;
  }
}
</style>